<template>
    <div  style="background: #fff;min-height: calc(100vh)">
        <van-nav-bar left-arrow @click-left="back()"/>
        <van-list style="min-height: calc(100vh - 96px);padding-bottom: 55px"
                  v-model="loading"
                  :error.sync="error"
                  :immediate-check="false"
                  error-text="请求失败，点击重新加载"
                  :finished="finished"
                  finished-text=""
                  @load="onLoad"
        >
            <van-cell-group>
                <van-cell v-if="total > 0" v-for="data in listData" :title="data.name">
                    <template #right-icon>
                        <van-icon @click="edit(data)" size="12" color="#3188E7" style="margin-top: 6px"> 编辑</van-icon>
                    </template>
                </van-cell>
                <van-empty v-if="total == 0  && !loading" description="暂无数据" />
            </van-cell-group>
        </van-list>
        <van-button style="position: fixed;bottom: 55px;left:10px;right: 10px;width: calc(100vw - 20px)" size="small"   @click="create()" round  type="info">+ 新增分组</van-button>
    </div>
</template>

<script>
import {Group} from '@/utils/request';
export default {
    data() {
        return {
            listData: [],
            params: {page: 1},//分页
            total: 1,//总数据
            error: false,//错误
            loading: false,//加载loading
            finished: false,//数据加载完成
        }
    },
    activated() {
        this.$store.dispatch('setActive', 4);
        this.onLoad();
    },
    methods: {
        edit(data){
            this.$router.push({name:'GroupUpdate',query:{id:data.id,name:data.name}});
        },
        create(){
            this.$router.push({name:'GroupUpdate'});
        },
        back() {
            this.$router.go(-1);
        },
        //加载更多
        onLoad() {
            this.list();
        },
        list(){
            this.loading = true;
            Group({params: this.params}).then((res)=>{
                if (res.code) {
                    this.loading = false;
                    this.total = 1;
                    this.error = true;
                }else{
                    this.loading = false;
                    this.total = res.data.total;
                    if(res.data.last_page == this.params.page){
                        this.finished = true;
                    }
                    if(this.params.page == 1){
                        this.listData = res.data.data;
                    }else{
                        this.listData = this.listData.concat(res.data.data);
                        this.params.page ++;//下一页
                    }
                }
            }).catch(()=>{
                this.loading = false;
                this.total = 1;
                this.error = true;
            })
        },
    }
}
</script>

<style scoped>
.van-sidebar-item--select::before {
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 16px;
    /*background-color: #111;*/
    background-color: #3188E7;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    content: '';
}
.van-sidebar-item{
    background-color: #fff;
}
.van-sidebar-item--select, .van-sidebar-item--select:active {
    /*background-color: #f7f8fa;*/
    color: #3188E7;
}
.van-tree-select__nav{
    background-color: #fff;
    border-right: 1px solid #f4f5f7;
}
.van-button--default {
    color: #3188E7;
    background-color: #fff;height: 48px;
    border: 0 solid #ebedf0;
}

</style>
